<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./vue.global.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="root">
    {{title}}
    <ul>
      <li v-for="li,i in list" v-if="true">
        {{li}}
      </li>
    </ul>
    <div>
      {{obj}}
    </div>
    <table border="1">
      <tr is="vue:my-tr"></tr>
    </table>
    <MyTitle></MyTitle>
  </div>
  <script>
    const { createApp } = window.Vue

    const myTr = {
      template: `
        <td>aa</td> <td>bb</td>
      `
    }

    const MyTitle = {
      template: `
        <h1>title</h1>
      `
    }

    const app = createApp({
      components: {
        'my-tr': myTr,
        MyTitle
      },

      data() {
        return {
          title: 'hello',
          list: [
            'a',
            'b',
            'c'
          ],
          obj: {
            x: 100
          }
        }
      },

      mounted() {
        setTimeout(() => {
          // this.list[0] = 'aaaa'
          // this.list.length = 0
          this.obj.x = 200
          this.obj.y = 300
        }, 3000)
      },
    })
    let vm = app.mount('#root')
  </script>
</body>
</html>